<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP
        CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
        CSS filter 属性的值有很多，下表列出的值是比较常用的，也是我们需要掌握的。
        filter 属性的值不为 none 时，会创建自己的 层叠上下文

        属性值	        描述
        blur()	       将高斯模糊应用于输入图像，就是将元素变得模糊
        brightness()   用于调整图像的亮度
        contrast()	   用于调整图像的对比度
        drop-shadow()  沿着图像的轮廓生成阴影效果。（要与 box-shadow 属性做区分)
        grayscale()	   将图像转换为灰度图
        opacity()	   调整图像的透明度。（与 opactiy 属性效果一致）
    -->
</body>
</html>